import React, { Component } from "react";
import {
  HashRouter as Router,
  NavLink,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Discovery from "../../views/Discovery";
import Playlists from "../../views/Playlists";
import Playlist from "../../views/Playlist";
import Songs from "../../views/Songs";
import Mvs from "../../views/Mvs";
import Mv from "../../views/Mv";
import Search from "../../views/Search";
import NotFound from "../../views/NotFound";

export default class Content extends Component {
  state = {
    url: "",
  };
  render() {
    const { url } = this.state;
    return (
      <Router>
        <div className="index-container">
          <div className="nav">
            <ul>
              <li>
                <NavLink activeClassName="router-link-active" to="/discovery">
                  <span className="iconfont icon-find-music"></span>
                  发现音乐
                </NavLink>
                <NavLink activeClassName="router-link-active" to="/discovery">
                  <span className="iconfont icon-find-music"></span>
                  发现音乐
                </NavLink>
                <NavLink activeClassName="router-link-active" to="/discovery">
                  <span className="iconfont icon-find-music"></span>
                  发现音乐
                </NavLink>
                <NavLink activeClassName="router-link-active" to="/discovery">
                  <span className="iconfont icon-find-music"></span>
                  发现音乐
                </NavLink>
              </li>
            </ul>
          </div>
          <div className="main">
            <Switch>
              <Route path="/discovery" component={Discovery}></Router>
              <Route path="/playlists" component={Playlists}></Router>
              <Route path="/playlist" component={Playlist}></Router>
              <Route path="/songs" component={Songs}></Router>
              <Route path="/mvs" component={Mvs}></Router>
              <Route path="/mv" component={Mv}></Router>
              <Route path="/search" component={Search}></Router>
              <Route path="/notFound" component={NotFound}></Router>
            </Switch>
          </div>
          <div className="player">
            {/* Audio loop 属性 Audio 对象 实例 将音频设置为循环播放.controls 属性规定浏览器应该为音频提供播放控件。 */}
            <audio src={url} loop controls autoPlay></audio>
          </div>
        </div>
      </Router>
    );
  }
}
